import { PlusOutlined, EditOutlined, DeleteOutlined } from '@/utils/icons';
import React, { useState } from 'react';
import { Table, Button, Space, Modal, Form, Input, Select, InputNumber, message } from 'antd';


const { Option } = Select;

export default function ProjectMembers({ members, onMembersChange }) {
  const [modalVisible, setModalVisible] = useState(false);
  const [editingMember, setEditingMember] = useState(null);
  const [form] = Form.useForm();

  const handleAdd = () => {
    setEditingMember(null);
    form.resetFields();
    setModalVisible(true);
  };

  const handleEdit = (record) => {
    setEditingMember(record);
    form.setFieldsValue(record);
    setModalVisible(true);
  };

  const handleDelete = (id) => {
    const newMembers = members.filter(member => member.id !== id);
    onMembersChange(newMembers);
  };

  const handleSubmit = (values) => {
    if (editingMember) {
      const newMembers = members.map(member => 
        member.id === editingMember.id ? { ...member, ...values } : member
      );
      onMembersChange(newMembers);
      message.success('更新成功');
    } else {
      const newMember = {
        id: Date.now(),
        ...values
      };
      onMembersChange([...members, newMember]);
      message.success('添加成功');
    }
    setModalVisible(false);
  };

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '职位',
      dataIndex: 'position',
      key: 'position',
    },
    {
      title: '部门',
      dataIndex: 'department',
      key: 'department',
    },
    {
      title: '角色',
      dataIndex: 'role',
      key: 'role',
    },
    {
      title: '工时',
      dataIndex: 'hours',
      key: 'hours',
      render: (value) => `${value}小时`,
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space>
          <Button type="link" icon={<EditOutlined />} size="small" onClick={() => handleEdit(record)}>
            编辑
          </Button>
          <Button type="link" icon={<DeleteOutlined />} size="small" danger onClick={() => handleDelete(record.id)}>
            删除
          </Button>
        </Space>
      ),
    },
  ];

  return (
    <div>
      <div style={{ marginBottom: 16 }}>
        <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
          添加成员
        </Button>
      </div>

      <Table
        columns={columns}
        dataSource={members}
        rowKey="id"
        pagination={false}
        size="small"
      />

      <Modal
        title={editingMember ? '编辑成员' : '添加成员'}
        open={modalVisible}
        onCancel={() => setModalVisible(false)}
        onOk={() => form.submit()}
        width={600}
      >
        <Form
          form={form}
          layout="vertical"
          onFinish={handleSubmit}
        >
          <Form.Item
            name="name"
            label="姓名"
            rules={[{ required: true, message: '请输入姓名' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            name="position"
            label="职位"
            rules={[{ required: true, message: '请输入职位' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            name="department"
            label="部门"
            rules={[{ required: true, message: '请选择部门' }]}
          >
            <Select>
              <Option value="研发部">研发部</Option>
              <Option value="市场部">市场部</Option>
              <Option value="人事部">人事部</Option>
              <Option value="财务部">财务部</Option>
              <Option value="行政部">行政部</Option>
            </Select>
          </Form.Item>

          <Form.Item
            name="role"
            label="角色"
            rules={[{ required: true, message: '请选择角色' }]}
          >
            <Select>
              <Option value="项目经理">项目经理</Option>
              <Option value="开发工程师">开发工程师</Option>
              <Option value="测试工程师">测试工程师</Option>
              <Option value="UI设计师">UI设计师</Option>
              <Option value="产品经理">产品经理</Option>
            </Select>
          </Form.Item>

          <Form.Item
            name="hours"
            label="工时"
            rules={[{ required: true, message: '请输入工时' }]}
          >
            <InputNumber style={{ width: '100%' }} min={0} />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}
